<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="shortcut icon" href="img/icon.jpg">
<!--<link rel="stylesheet" type="text/css" href="css/twen.css"/>-->
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- <link rel="stylesheet" href="css/bootstrap-theme.min.css"> -->
<title>twen</title>
<style type="text/css">
body {
  padding: 0px;
  margin: 0px;
  background-image: url(img/bg.jpg);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
p {
  font: 200 18px/1.8 'Optima','Songti SC','Verdana','Microsoft Yahei',simsun,serif;
  cursor: default;
}
h2 {
    padding-bottom: 10px;
    font-weight: bold;
}
#traval{
  padding: 10px 75px 0;
}

a:not(.btn) {
  color: #00699E;
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  transition: 300ms;
}
a:hover:not(.btn),
a:active:not(.btn) {
  color: #9E0000;
  text-decoration: none;
}

#img4 a:not(.btn) {
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  transition: 300ms;
}
#img4 a:hover:not(.btn),
#img4 a:active:not(.btn) {
 -webkit-transform: translateY(-4px);
  -moz-transform: translateY(-4px);
  transform: translateY(-4px);

  -webkit-box-shadow: 0 0px 15px #00699E;
  -moz-box-shadow: 0 0px 15px #00699E;
  box-shadow: 0 0px 15px #00699E;
}


.wo:first-letter {
  font-size: 130%;
  padding-right: 1px; 
}
.jp-controls{
  position: fixed;
  top: 16px;
  right: 25%;
  z-index: 99;
}
.navbar-inverse {
  /*background: rgba(0, 0, 0, 0.8);*/
  border-radius: 6px;
  -webkit-box-shadow: 0 2px 6px black;
  -moz-box-shadow: 0 2px 6px black;
  box-shadow: 0 2px 6px black;
}

.navbar-wrapper {
  margin: auto;
  position: fixed;
  top: 0;
  left: 5%;
  right: 5%;
  z-index: 99;
}
.jp-play{
   padding: 20px 0px;
   opacity: .5;
  filter: alpha(opacity=50);

}
.jp-play:hover, .jp-play:focus {
  opacity: .9;
  filter: alpha(opacity=90);
}
.jp-pause{
   padding-bottom: 20px;
   opacity: .5;
  filter: alpha(opacity=50);
}
.jp-pause:hover, .jp-pause:focus {
  opacity: .9;
  filter: alpha(opacity=90);
}
/*
#img{
  text-align: center;
}*/
.img_abs {
  position: relative;
  top: -390px;
  -webkit-box-shadow: 0 2px 42px black;
  -moz-box-shadow: 0 2px 42px black;
  box-shadow: 0 2px 42px black;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 494px;
}
.sliheight{ 
  height: 494px;  
  }
.padding-card {
  position: relative;
  top: -328px;
  background: rgba(255, 255, 255, 0.6);
}
.padding-card1 {
  position: relative;
  top: -238px;
  background: rgba(255, 255, 255, 0.7);
}
.padding-card2 {
  position: relative;
  top: -122px;
  background: rgba(255, 255, 255, 0.7);
}
.padding-card3 {
  position: relative;
  background: rgba(255, 255, 255, 0.7);
}
.carder{
  border-radius: 6px;
  -webkit-box-shadow: 0 2px 42px black;
  -moz-box-shadow: 0 2px 42px black;
  box-shadow: 0 2px 42px black;
}
.shadow {
  width: 100%;
  height: 150px;
  position: absolute;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.2)), color-stop(100%, rgba(255, 255, 255, 0)));
  border-top: 1px solid #e0e0e0;
  z-index: -999;
}
.gslid{
  height: 494px;
  -webkit-border-top-right-radius: 6px;
  -webkit-border-bottom-right-radius: 6px;
  -moz-border-top-right-radius: 6px;  
  -moz-border-bottom-right-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
#imgtwen,#follow{
  opacity: .0;
  filter: alpha(opacity=0);
}
#intro{
  display: none;
}
#worry{
  position: relative;
  top: -450px;
  width: 90%;
  margin: 0 auto;
  border-radius: 6px;
  text-align: center;
}
</style>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="js/jquery.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jplayer.playlist.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.controller.js"></script>
<script type="text/javascript" src="js/twen.js"></script>
</head>

<body>
<nav class="navbar-wrapper">
  <div class="navbar-inverse">
    <div class="container">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
       </button>
      <a class="navbar-brand" href="#"><img src="img/twenwords.png"></a>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">主页</a></li>
          <li><a href="board.html">留言板</a></li>
       <!--   <li><a href="#contact">Contact</a></li>-->
          <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">联系我<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li class="dropdown-header">邮箱</li>
              <li><a href="https://mail.qq.com/" target="_blank">+joneyee22@qq.com</a></li>
               <li class="divider"></li>
              <li class="dropdown-header">LOFTER</li>
              <li><a href="http://twentwo.lofter.com/" target="_blank">@twen_Yee</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">微博</li>
              <li><a href="http://weibo.com/coyee/" target="_blank">@twen_Yee</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">微信</li>
              <li><a href="https://wx.qq.com/" target="_blank">@twen_Yee</a></li>
            </ul>
          </li>
          <li><a href="" data-toggle="modal" data-target="#myModal">关于</a></li>
        </ul>
        <div id="jquery_jplayer_1" class="jp-jplayer"></div>
        <div id="jp_container_1" class="jp-audio">
        <div class="jp-controls">
        <!-- comment out any of the following <li>s to remove these buttons -->
        <a class="jp-play" href="#" data-toggle="tooltip" data-placement="bottom" title="播放音乐"><img src="img/play.png"></a>
        <a class="jp-pause" href="#" data-toggle="tooltip" data-placement="bottom" title="停止音乐"><img src="img/pause.png"></span></a>
        </div>
        </div>
      </div>  
    </div>
  </div>
</nav>

<header id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
  
  <div class="carousel-inner sliheight">
    <div class="item active"> <img src="img/04.jpg"> </div>
    <div class="item"> <img src="img/00.jpg"> </div>
    <div class="item"> <img src="img/05.jpg"> </div>
  </div> 

  <div class="shadow"></div>

  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"  style="position: relative; top: -270px; margin-left: 5%;"><img src="img/prev.png"></a><a class="right carousel-control" href="#carousel-example-generic" data-slide="next" style="position: relative; top: -270px; margin-left: 85%;"><img src="img/next.png"></a> 
</header>

<!--[if lt IE 10]>
    <div class="alert alert-warning alert-dismissable" id="worry">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        <h3>浏览器版本过低</h3>
        <br>
        <p>你知道吗？你的浏览器略渣！这个网页上的有很多好看的东西和动画效果都显示不了！</p>
        <p>建议<a href="http://windows.microsoft.com/zh-cn/internet-explorer/downloads/ie-10/worldwide-languages" target="_blank">升级</a>你的浏览器或使用 <a href="http://www.google.com/intl/zh-CN/chrome/browser/" target="_blank">Chrome</a> 或 <a href="http://www.firefox.com.cn/" target="_blank">Firefox</a> 等高级浏览器。</p>
    </div>
<![endif]-->


<article class="container" style="width: 90%;"> 

<div class="text-center"  id="imgtwen">
 <img src="img/twen.png" class="img-circle img-thumbnail img_abs">
</div>

<section class="carder padding-card jumbotron" style="width: 90%;margin:0 auto;" id="intro">
  <div class="row">
  <h2>简介</h2><p class="wo">顽固不化，悲天悯人，请叫我艺术家。</p><br></div>
  <div class="row">
  <blockquote class="pull-right">
  <p>小巷，又弯又长，没有门，没有窗，我拿把旧钥匙，敲着厚厚的墙。</p>
  <small>顾城</small>
  </blockquote></div>
</section>

<section class="carder padding-card1" id="follow">
  <div class="row">
    <div class="col-md-12" id="traval">
    <h2>音乐</h2>
    </div>
  </div>
    <div class="row" style="padding-left: 60px; padding-bottom: 35px;">
    <div class="col-md-6"   id="img4">
    <div class="row" style="margin-bottom:40px;">
      <div class="col-md-6">
          <a style="cursor: pointer; height: 90%;width: 90%;" class="thumbnail" data-toggle="popover" data-placement="top" title="《Imagine》 by John Lennon in 1971" data-content="这是列侬最成功的专辑之一，歌曲Imagine是他最成功的单曲。">
           <img src="img/JL.jpg">
          </a>
        </div>
         <div class="col-md-6">
          <a style="cursor: pointer; height: 90%;width: 90%;margin-left: -10px;" class="thumbnail" data-toggle="popover" data-placement="top" title="《Thriller》 by Jackson in 1982" data-content="这是世界历史上销量最高的一张专辑，销量为1.04亿。">
           <img src="img/MJ.jpg">
          </a>
        </div>
      </div>
      <div class="row">
      <div class="col-md-6">
          <a style="cursor: pointer; height: 90%;width: 90%;" class="thumbnail" data-toggle="popover" data-placement="top" title="《七里香》 by Jay Chou in 2004" data-content="全亚洲300万张销量，周杰伦最成功的专辑之一。">
           <img src="img/JC.jpg">
          </a>
        </div>
         <div class="col-md-6">
          <a style="cursor: pointer; height: 90%;width: 90%;margin-left: -10px;" class="thumbnail" data-toggle="popover" data-placement="top" title="《Moon Landing》 by James Blunt in 2013" data-content="上尉诗人的专辑每张都喜欢。">
           <img src="img/JB.jpg">
          </a>
        </div>
      </div>
    </div>
    <div class="col-md-6" style="margin-left: -20px;padding-right: 60px;">
        <ul id="myTab" class="nav nav-tabs">
        <li class="active"><a href="#home" data-toggle="tab">介绍</a></li>
        <li><a href="#p1" data-toggle="tab">约翰列侬</a></li>
        <li><a href="#p2" data-toggle="tab">迈克杰克逊</a></li>
        <li><a href="#p3" data-toggle="tab">周杰伦</a></li>
        <li><a href="#p4" data-toggle="tab">詹姆斯布朗特</a></li>
      </ul>
      <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="home">
          <p  style="padding: 10px 10px;" class="wo">　
            一直以为音乐是这个世上最富情感的艺术。不仅仅是因为它抚慰人，激励人，更重要的是它可能影响人的一生，这就是音乐的魅力。现今的音乐就是这样。当这个世界上第一个音乐家拿着手中的乐器唱出内心的第一个字符的时候，他一定没有想过他发出的声音能影响到外人。这东西是如此的私人。但无论如何这是最真诚的东西，这就是之所以打动人的原因。有时候音乐让我心如止水，尤其在这个纷扰的世界，我们需要音乐，好的音乐。
        <div class="row">
          <div class="col-md-6">
             <div id="jp_container_1" class="jp-audio">
              <div class="jp-type-playlist">
                <div class="jp-playlist">
                  <ul class="" style="list-style-type: circle;">
                    <li></li>
                  </ul>
                </div>
              </div>
            </div>
           </div>
       
        <div class="col-md-6">
          <img src="img/msc.png">
       </div> 

      </div>
        </p>
        </div>
        <div class="tab-pane fade" id="p1" style="padding: 10px 10px 0px;">
          <p style="text-indent:2em;"><img src="img/lennon.jpg" class="img-circle img-thumbnail" style="float: left;margin-right: 10px;">约翰·温斯顿·列侬(John Winston Lennon)，英国著名摇滚乐队“披头士”成员，摇滚史上最伟大的音乐家之一，披头士乐队的灵魂人物，诗人，社会活动家，反战者，以身为披头士乐队创团团员扬名全球，列侬与保罗·麦卡特尼的合作是20世纪最成功也是最具影响力的创作组合之一，因其在音乐界的活跃和贡献，在1965年获英国女王颁发的大英帝国勋章，1970年披头士乐队解散后，列侬发行《约翰·列侬/塑胶小野乐队》与《想像》等备受赞誉的专辑，也创作了《Give Peace a Chance》、《Imagine》等传唱度极高的经典歌曲，顺利开创了单飞生涯，摇滚乐坛有史以来最富传奇色彩的人物。<small class="text-primary">左图上1为专辑《Imagine》</small></p>
        </div>
        <div class="tab-pane fade" id="p2" style="padding: 10px 10px 0px;">
          <p style="text-indent:2em;"><img src="img/jackson.jpg" class="img-circle img-thumbnail" style="float: left;margin-right: 10px;">迈克尔·杰克逊（Michael Jackson，世界舞王 ---记忆的永恒1958.8.29－2009.6.25）被赞誉为“流行音乐之王”（King of Pop），是世界史上最具代表性与最受人欢迎和最多支持者的艺人，被吉尼斯世界纪录评鉴为“人类史上最成功的艺人”，魔幻般的舞步更是被群星效仿。在当今群星灿烂的时代里，他更是明星中的明星。他为慈善事业捐款超过3亿美元，是全世界以个人名义捐助慈善事业最多的艺人。由于患有白癜风皮肤病致使皮肤变白。洛杉矶当地时间2009年6月25日，因为私人医生康拉德·莫里违规注射镇静剂过量导致杰克逊猝然离世，终年50岁。<small class="text-primary">左图上2为专辑《Thriller》</small></p>
        </div>
        <div class="tab-pane fade" id="p3" style="padding: 10px 10px 0px;">
          <p style="text-indent:2em;"><img src="img/jay.jpg" class="img-circle img-thumbnail" style="float: left;margin-right: 10px;">周杰伦（Jay Chou），华语流行男歌手、演员、词曲创作人、MV及电影导演。2000年被吴宗宪发掘并推出首张专辑《Jay》；2001年发行专辑《范特西》逐步奠基其在亚洲流行乐坛地位；2002年在中国、新加坡、马来西亚、美国等地举办首场个人世界巡回演唱会；2003年登上美国《时代-TIME》周刊亚洲版封面人物。周杰伦的音乐融合中西方元素，风格多变，四次获得世界音乐大奖最畅销亚洲艺人；凭借专辑《Jay》、《范特西》、《叶惠美》及《跨时代》四次获得金曲奖"最佳国语专辑"奖，并凭借《魔杰座》、《跨时代》获得第20届和第22届金曲奖“最佳国语男歌手”奖。<small class="text-primary">左图下1为专辑《七里香》</small></p>
        </div>
        <div class="tab-pane fade" id="p4" style="padding: 10px 10px 0px;">
          <p style="text-indent:2em;"><img src="img/james.jpg" class="img-circle img-thumbnail" style="float: left;margin-right: 10px;">詹姆斯·布朗特（James Blunt，1974年2月22日－），亦作詹姆仕·布朗特，英国流行歌手，2004年10月11日发行首张个人专辑《Back to Bedlam》（不安于室），凭借单曲You're Beautiful（美丽的你）一举成名，有杂志评价他的声音为“堕落的天使”。在“You're Beautiful”中，他那忧郁的嗓音加上忧郁的音乐成就了这首忧郁歌曲的成功。2007年9月18日发行第2张专辑《All The Lost Souls》（失落的灵魂）。2010年11月发行第3张专辑《Some Kind Of Trouble》(美丽的忧虑)。2013年10月发行第4张专辑《Moon Landing》。<br><small class="text-primary">左图下2为专辑《Moon Landing》</small></p>
        </div>
      </div>
  </div>
</section>

<section class="carder padding-card2">
 <div class="row">
    <div class="col-md-8" id="traval">
    <h2>旅行</h2>
        <p class="wo">古人说读万卷书，行万里路。现如今人们汲取资讯和知识的途径有很多，但是行万里路远远没有做到。而偶尔的出游，也不能算作旅行，只是旅游罢了。</p><br>
           <p class="wo">中国已经很大，世界更大。不幸的是，我们生活在高速运转的社会，科技发展了，代价是水不再透明，天不再蔚蓝...我们国家是足够大，但是听人说，八零年代去西藏和现今去西藏已经不再一样，在世界屋脊上也逃不过人类的污染。我希望我们的生活充满正能量，把不幸变成有幸便是最大的仁慈。我希望我们的苦难只是源于天灾，而不是人祸。我希望我能行万里路，偶尔躺坐洱海边，和家人，和朋友，享受那份安详。</p>
           <br>
          <a href="http://www.flickr.com/photos/100109065@N08/" target="_blank" class="btn btn-primary btn-lg" style="float: right;">欢迎浏览我的Flickr</a>
    </div>
    <div class="col-md-4">
      <div id="photograph" class="carousel slide" data-ride="carousel">

        <ol class="carousel-indicators">
    <li data-target="#photograph" data-slide-to="0" class="active"></li>
    <li data-target="#photograph" data-slide-to="1"></li>
  </ol> 
  
  <div class="carousel-inner gslid">
    <div class="item active"> <img src="img/g2.jpg"> </div>
    <div class="item"> <img src="img/g3.jpg"> </div>
  </div> 

  </div>
    </div>

  </div>
</section>

<section class="carder padding-card3" style="margin-bottom: 100px;">
  <div class="row">
    <div class="col-md-12" id="traval">
    <h2>动漫</h2></div>
  </div>
  <div class="row" style="padding-left: 60px; padding-bottom: 35px;">
    <div class="col-md-4">
      <img src="img/gqj.jpg" class="img-thumbnail img-circle" style="float: right;margin-left: 10px;">
      <p style="text-indent:2em;" class="wo">日本人两极的人格铸就了许多影响人类的艺术家，宫崎骏就是其中之一。在科技发展迅猛的二十一世纪的今天，宫崎骏仍旧坚持手工作画，每每想起几十分钟的一部电影是这位白发老人一帧帧画出来的，心中不免对这种工匠精神无比崇敬。喜欢他不只于此，更重要的是他作品中充满的人性。《龙猫》、《天空之城》、《千与千寻》这一部部里的一幕幕，相信于我此生都难以忘怀。</p>
    </div>
    <div class="col-md-8">
       <div class="panel-group" id="accordion" style="margin-right: 50px;">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          1.最爱的四部作品
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body" style="background-color: #dcdcdf;">
       <a href="http://i7.imgs.letv.com/player/swfPlayer.swf?id=2083377&autoplay=0" target="_blank"><img data-toggle="tooltip" data-placement="left" title="天空之城" id="panel1" src="img/sky.jpg" class="img-thumbnail"></a>
       <a href="http://img1.c0.letv.com/ptv/player/swfPlayer.swf?id=2092557&autoplay=0" target="_blank"><img data-toggle="tooltip" data-placement="top" title="龙猫" id="panel2" src="img/longmao.jpg" class="img-thumbnail"></a>
       <a href="http://i7.imgs.letv.com/player/swfPlayer.swf?id=637307&autoplay=0" target="_blank"><img data-toggle="tooltip" data-placement="top" title="千与千寻" id="panel3" src="img/qy.jpg" class="img-thumbnail"></a>
       <a href="http://v.baidu.com/movie/112436.htm?&q=%E8%B5%B7%E9%A3%8E%E4%BA%86%00" target="_blank"><img data-toggle="tooltip" data-placement="right" title="起风了" id="panel4" src="img/qfl.jpg" class="img-thumbnail"></a>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          2.作品的年份信息
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body" style="background-color: #eeeeee;">
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th>#</th>
                <th>年份</th>
                <th>名称</th>
                <th>形式</th>
                <th>担任身份</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>1986</td>
                <td>《天空之城》</td>
                <td>电影</td>
                <td>导演、编剧</td>
              </tr>
              <tr>
                <td>2</td>
                <td>1988</td>
                <td>《龙猫》</td>
                <td>电影</td>
                <td>导演、编剧</td>
              </tr>
              <tr>
                <td>3</td>
                <td>2001</td>
                <td>《千与千寻》</td>
                <td>电影</td>
                <td>导演、编剧</td>
              </tr>
              <tr>
                <td>4</td>
                <td>2013</td>
                <td>《起风了》</td>
                <td>电影</td>
                <td>导演</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          3.乡间的龙猫龙猫
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body" style="background-image: url(img/bglm.jpg);height: 260px;">
      </div>
    </div>
  </div>
</div>

    </div>
  </div>
</section>

</article>

<p style="text-align:center;">Copyright © 2013.11 Designed and Developed by twen_Yee. All Rights Reserved.</p> 

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h2 class="modal-title" id="myModalLabel">关于</h2>
      </div>
      <div class="modal-body">
        <p>1.运用Html5。使用了支持响应式的 Bootstrap 框架构建。<br>2.由于Bootstrap引入了jQuery，在网页中增加了jplayer的jQuery插件用于播放音乐。<br>3.为了减少包的大小，网页中的音乐使用外链，可能会失效。<br>4.部分效果运用强大的CSS3，部分运动使用已引入的jQuery,部分组件来自于Bootstrap。
        <br>5.留言板用纯js实现，并不能保存数据，仅仅是示例。</p>      
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

</body>
</html>